<template>
	<div class="mobile_home">
		<!-- 轮播区域 -->
		<div class="banner">
			<el-carousel :interval="5000" type="card" arrow="always" height='10rem'>
				<el-carousel-item v-for="item in HotBanner" :key="item.id" @click="go2detail(item.id)">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`">
				</el-carousel-item>
			</el-carousel>
		</div>
		<MobileHomeList proptitle="热门推荐" :proplist='hotlist'></MobileHomeList>
		<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		<div class="no">
		</div>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/MobileHomeList.vue'

	export default {
		name: 'MobileHome',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				bannerlist: [],
				hotlist: [],
				newslist: []
			}
		},
		methods: {
			go2detail(id) {
				console.log("@22");
				console.log(id);
			},
			findNew() {
				console.log('wryyynewww');
				this.$get("/api/public/findHot/1/6").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.bannerlist = resp.data.data;
					this.newslist = resp.data.data;
					console.log(this.bannerlist);
				})
			},
			findHot() {
				console.log('wryyy');
				this.$get("/api/public/book/findTopSale/6").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.hotlist = resp.data.data;
					console.log(this.hotlist);
				})
			},

		},
		mounted() {
			this.findHot();
			this.findNew();
		},
		computed: {
			HotBanner() {
				this.bannerlist.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				//forEach/for..in/for..of: 都是可以在需要限制输出的数据数量模块使用
				//map：基本确定不会更改数组的长度，只不过数据的内容发生格式化改变
				let arr = [];
				this.bannerlist.forEach((item, i) => {
					if (i < 6) {
						arr.push(item)
					}
				})
				return arr;
			}
		}
	}
</script>

<style scoped>
	.mobile_home {
		background-color: #373b46;
	}

	.banner {
		width: 100%;
		height: 10rem;
		margin-bottom: 20px;
	}

	.banner img {
		margin-left: 50px;
		margin-top: 20px;
		width: 50%;
		height: 80%;
	}

	/* 因为（用了别人的样式）找不到样式，所以我们使用：穿刺（CSS用于修改固定样式的操作） */
	.banner .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;
	}

	.banner .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #009688 !important;
	}

	.no {
		height: 2.5rem;
	}

	.banner .el-carousel /deep/ .el-carousel__mask {
		width: 100%;
		background-color: initial;
		opacity: .24;
		transition: .2s;
	}
</style>